<template>
  <div class="container">
    <p class="title">发布考试计划</p>
    <el-button v-if="tableData.length" type="primary" size="small" @click="dialogVisible = true">重置考试时间</el-button>
    <el-button v-else type="primary" size="small" @click="$router.push({name: 'setExamTime'})">设置考试时间</el-button>
    <table class="table" ref="table" border="1" cellspacing="0" cellpadding="0" borderColor="#e0e0e0" v-loading="loading">
      <thead>
        <tr>
          <td>考试时间</td>
          <td>考试批次/补考</td>
          <td>候考时间</td>
          <td>考试时间</td>
          <td></td>
        </tr>
      </thead>
      <tbody v-if="tableData.length" v-for="(item,idx) in tableData" :key="idx">
        <tr>
          <td :rowspan="item.data.length">
            {{item.examDate}}
          </td>
          <td>第{{item.data[0]?item.data[0].batch:''}}批</td>
          <td>{{item.data[0]?item.data[0].waitBeginTime:''}} - {{item.data[0]?item.data[0].waitEndTime:''}}</td>
          <td>{{item.data[0]?item.data[0].examBeginTime:''}} - {{item.data[0]?item.data[0].examEndTime:''}}</td>
          <td :rowspan="item.data.length">
            <a href="javascript:;" @click="item.show = !item.show">{{item.show?'收起':'展开'}}</a>
          </td>
        </tr>
        <tr v-for="(t,i) in item.data" :key="i" v-if="(i>=1) && item.show">
          <td>
            <span v-if="t.batch<0">第{{Math.abs(t.batch)}}次补考</span>
            <span v-else>第{{t.batch}}批</span>
          </td>
          <td>
            {{t.waitBeginTime}} - {{t.waitEndTime}}
          </td>
          <td>
            {{t.examBeginTime}} - {{t.examEndTime}}
          </td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr>
          <td colspan="5">
            <p>暂时没有数据，请设置考试时间</p>
          </td>
        </tr>
      </tbody>
    </table>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" center>
      <p class="tip">您确定需要重置考试计划吗？</p>
      <span class="fuzhu"></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="checkReset">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      tableData: [],
      loading: false,
      dialogVisible: false
    }
  },
  computed: mapState({
    changeNotify: state => state.changeNotify
  }),
  methods: {
    // 重置考试时间
    async checkReset() {
      let res = await this.$http.resetExamTime('')
      if (res.code === 20000) {
        this.$message.success('重置考试时间成功！')
        this.tableData=[];
        this.dialogVisible = false
        this.$store.commit('CHANGE_NOTIFY', !this.changeNotify)
      } else {
        this.$message.error(res.msg)
        this.dialogVisible = false
      }
    },
    // 获取考试时间
    async getExamTime() {
      this.loading = true
      let res = await this.$http.getExamTime('')
      if (res.code === 20000) {
        let obj = res.data
        let temp = []
        let arr = []
        for (let i = 0; i < obj.length; i++) {
          let index = temp.indexOf(obj[i].examDate)
          if (index === -1) {
            arr.push({
              examDate: obj[i].examDate,
              show: false,
              data: [obj[i]]
            })
            temp.push(obj[i].examDate)
          } else {
            arr[index].data.push(obj[i])
          }
        }
        this.tableData = arr
        this.loading = false
      } else {
        this.$message.error(res.msg)
      }
    }
  },
  mounted() {
    this.getExamTime()
    this.$nextTick(() => {
      if (navigator.userAgent.indexOf("Firefox") > 0) {
        this.$refs.table.style.borderCollapse = 'separate'
      }
    })
  }
}
</script>

<style lang="stylus" scoped>
@import url('../../assets/styles/base.css');

color = #4177ff;
background = #f3f3f3;

.table {
  width: 100%;
  margin-top: 25px;
  text-align: center;
  border-spacing: 0;

  // border-collapse separate
  td {
    border: 1px solid #e0e0e0;
  }

  thead {
    tr {
      background: background;

      td {
        min-width: 170px;
        height: 48px;
        font-weight: bold;
        line-height: 48px;
        text-align: center;
      }
    }
  }

  tbody {
    td {
      min-width: 170px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      vertical-align: middle;

      a {
        color: color;
      }
    }
  }
}

.tip {
  text-align: center;
  color: red;
}
</style>
